import React from "react";
import "./GoodSelect.scss";
import { Carousel } from "antd";
import { useEffect, useState } from "react";
import {
  get_course_lunbo,
  get_good_course,
  get_new_course,
  get_free_course,
} from "../../utils/api";
import CourseItem from "../CourseItem/CourseItem";
import "antd/dist/antd.css";
function GoodSelect() {
  const [lunboData, setLunboData] = useState();
  // 保存精选教程数据
  const [selectData, setSelectData] = useState();
  // 保存最新课程数据
  const [newData, setNewData] = useState();
  // 保存限时免费数据
  const [freeData, setFreeData] = useState();
  useEffect(() => {
    async function getGoodCourse() {
      let { data: lunbo } = await get_course_lunbo();
      let { data: seldata } = await get_good_course();
      let { data: newdata } = await get_new_course();
      let { data: freedata } = await get_free_course();
      console.log("获取教程轮播数据", lunbo);
      setLunboData(lunbo);
      setSelectData(seldata);
      setNewData(newdata);
      setFreeData(freedata);
    }
    getGoodCourse();
  }, []);
  return (
    <div className="GoodSelect">
      <div className="lunbo">
        <Carousel autoplay>
          {lunboData &&
            lunboData.map((item) => (
              <div key={item.id}>
                <img src={"https://ss.lanqb.com/" + item.picture} alt="" />
              </div>
            ))}
        </Carousel>
      </div>
      <div className="good_con">
        <div className="good_course">
          {selectData ? (
            <div className="top">
              <span>精选教程</span>
              <i>查看更多&gt;</i>
            </div>
          ) : (
            ""
          )}
          <div className="sel_con">
            {selectData &&
              selectData.map((item) => (
                <CourseItem item={item} key={item.id}></CourseItem>
              ))}
          </div>
        </div>
        <div className="new_course">
          {newData ? (
            <div className="top">
              <h3>最新上架</h3>
            </div>
          ) : (
            ""
          )}
          <div className="new_con">
            {newData &&
              newData.map((item) => (
                <CourseItem item={item} key={item.id}></CourseItem>
              ))}
          </div>
        </div>
        <div className="free_course">
          {freeData ? (
            <div className="top">
              <h3>限时免费</h3>
            </div>
          ) : (
            ""
          )}
          <div className="free_con">
            {freeData &&
              freeData.map((item) => (
                <CourseItem item={item} key={item.id}></CourseItem>
              ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default GoodSelect;
